<template>
  <el-dialog
    v-model="visibleDialog"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    title="Top Accounts"
    width="734px"
    align-center
    :lock-scroll="false"
    @closed="$emit('close')"
  >
    <div v-loading.fullscreen.lock="loading" class="accounts">
      <el-scrollbar>
        <table width="100%">
          <colgroup>
            <col width="250" />
            <col width="auto" />
            <col width="150" />
          </colgroup>
          <thead>
            <tr>
              <th>Jokers</th>
              <th>Quantity</th>
              <th>Rank</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in rankList" :key="index">
              <td>{{ item.username }}</td>
              <td>{{ numberWithCommas(item.point) }}</td>
              <td>{{ item.rank }}</td>
            </tr>
          </tbody>
        </table>
      </el-scrollbar>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, ref, watch, inject } from 'vue'
import { log } from '../utils/log'
import { numberWithCommas } from '../utils/index'
const $axios = inject('$axios')

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const rankList = ref([])
const loading = ref(false)
const visibleDialog = ref(false)

const getRankList = async () => {
  loading.value = true
  try {
    const { data } = await $axios.get('/rank')
    if (data.ok && data.result) {
      rankList.value = data.result || []
    }
  } catch (error) {
    log(error)
  }
  loading.value = false
}

watch(
  () => props.visible,
  (newValue) => {
    visibleDialog.value = newValue
    if (newValue) {
      getRankList()
    }
  }
)
</script>

<style lang="less" scoped>
.accounts {
  display: flex;
  flex-direction: column;
  overflow: auto;
  height: 640px;
  overflow: hidden;
  & > .panel {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }
  table {
    color: #0f0;
    border: 0;
    border-spacing: 0;
    font-size: 14px;
    margin-right: -5px;
    thead {
      th {
        border-bottom: 1px solid #003000;
        text-align: left;
        padding: 4px 0 4px 25px;
      }
    }
    tbody {
      tr {
        td {
          border-bottom: 1px solid #003000;
          text-align: left;
          padding: 4px 0 4px 25px;
        }
      }
    }
  }
}
</style>
